<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <%- include('./public/head.html') %>
  </head>

  <body>
    <%- include('./public/header.html') %>
    <div class="main-wrapper">
      <section class="cta-section theme-bg-light py-5">
        <div class="container text-center">
          <h2 class="heading">小涛的博客 ——— 选择你喜欢的博客分类</h2>
          <form>
            <div class="form-row align-items-center justify-content-center">
              <div class="col-auto my-1">
                <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
                <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
                  <option disabled selected>选择分类</option>
                  <% lists.forEach(list => { %>
                  <option <%= cid == list.id ? 'selected' : '' %> value="<%= list.id %>"><%= list.name %></option>
                  <% }) %>
                </select>
              </div>
            </div>
          </form>
        </div>
      </section>
      <section class="blog-list px-3 py-5 p-md-5">
        <div class="container">
          <% for(let data of blogs){ %>
          <!-- 内容开始 -->
          <div class="item mb-5">
            <div class="media">
              <img
                src="https://via.placeholder.com/110x110.png?text=shixtao.cn"
                class="img-list mr-3 img-fluid post-thumb d-none d-md-flex"
                data-src="<%= data.img %>"
                alt="占位图"
              />
              <div class="media-body">
                <h2 class="title mb-1">
                  <a href="/article/<%= data.id %>"><%= data.title %></a>
                </h2>
                <div class="meta mb-1">
                  <i class="iconfont icon-bokeyuan"></i>
                  <span title="博客类型"
                    ><%= data.type %>&nbsp;
                    <span class="text-info">
                      <% for(let list of lists){ %> <% if(data.cid === list.id){
                      %> <%= list.name %> <% } %> <% } %>
                    </span>
                  </span>
                  <i class="iconfont icon-shizhong"></i>
                  <span title="发表时间"><%= data.time %></span>
                  <i class="iconfont icon-renyuan"></i>
                  <span title="博客作者"><%= data.author %></span>
                  <i class="iconfont icon-pinglun"></i>
                  <span title="评论"
                    ><a href="/article/<%= data.id %>#form"
                      ><%= data.comment %> 评论</a
                    ></span
                  >
                  <i class="iconfont icon-liulan"></i>
                  <span title="浏览量"><%= data.click %></span>
                </div>
                <div class="intro"><%= data.description %></div>
                <a class="more-link" href="/article/<%= data.id %>"
                  >更多内容 &rarr;</a
                >
              </div>
            </div>
          </div>
          <% } %>
        </div>
      </section>
      <%- include('./public/footer.html') %>
    </div>
    <%- include('./public/color.html') %>
    <%- include('./public/script.html') %>
  </body>
</html>
